<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>新问题</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/bootstrap.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/common.js"></script>
    <script type="text/javascript"  charset="utf-8" src="<%=basePath%>xheditor/xheditor-1.1.14-zh-cn.min.js"></script>
</head>
<style>
.xheBtn,#xheSave,#xheCancel{
	height:24px;
	text-align:center;
}
.xheTool .xheIcon.xheBtnAbout{
display:none;
}
.xheDialog label{
	width:73px;
	display:inline;
}
.xheDialog input,.xheDialog select{
	width:80px;
}
.question.event .body .bd{
	position:relative;
}
.question.event .body .bd span.btn{
	position:absolute;
	top:3px;
	right:5px;
}
</style>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub user-nav">
		<jsp:include page="include/usernav.jsp"></jsp:include>
	</div>
	<div class="main-wrap">
		<div class="box user-bd">
			<div class="tl u">
				<h3>
					新问题
				</h3>
			</div>
			<div class="bd">
				<div class="tagsinput">
					<span id="taglist">
						<c:forEach var="tag" items="${tags }">
							<span class="badge tag action">&nbsp;${tag.name }&nbsp;<i class="icon-minus-sign" data="${tag.id }"></i></span>
		                </c:forEach> 
	                </span>
	                <span id="tagsinput_addTag" class="tagsinput-add-container badge">
	                	<input placeholder="新标签" id="tagsinput_tag" style="color: rgb(102, 102, 102); width: 40px;">
	                	<span class="addtag" id="addUserTagBtn"><i class="icon-plus-sign"></i></span>
	                </span>
                </div>
                <div class="timeline" id="timeline">
                	<c:forEach var='map' items='${answers.list }'>
              			<div class='question event' id="question_${map.id }">
						  <div class='head'>
						  		<c:choose>
					 				<c:when test="${map.is_anonymous==0 }">
					 					<a href="c/home/${map.user_by_id }.html"><img src='upload/head/${map.user_by_head }?s=50' onerror='this.src="upload/head/default.jpg?s=50"'/></a>
					 				</c:when>
					 				<c:otherwise>
					 					<img src='upload/head/m/anony.jpg?s=50' onerror='this.src="upload/head/default.jpg?s=50"'/>
					 				</c:otherwise>
					 			</c:choose>
						 		
						 		<img src='head/m/${map.user_head}' onerror='this.src="upload/head/default.jpg?s=50"'/>
						 		<span class='action'>问</span>
						 		<c:if test="${map.is_public==0 }">
				 					<span class='lock'><img src="img/lock.gif" title='不公开'/></span>
				 				</c:if>
						  </div>
						  <div class='body'>
						 	<div class='hd'>
						 		<p>
						 			<c:choose>
						 				<c:when test="${map.is_anonymous==0 }">
						 					<span class='name'><a href="c/home/${map.user_by_id }.html">${map.user_by_name}</a></span>
						 				</c:when>
						 				<c:otherwise>
						 					<span class='name'>路人</span>
						 				</c:otherwise>
						 			</c:choose>
						 			<span>&nbsp;问&nbsp;</span>
						 			<span class='name'>我:</span>
						         ${map.question }
						 		</p>
						 	</div> 
						 	<div class='bd'>
							 	<textarea name="answer" style="width:600px;height:auto" 
									class="xheditor {skin:'nostyle',html5Upload:false,forcePtag:true,cleanPaste:3,disableContextmenu:true,width:'600',height:'100',upImgUrl:'<%=basePath%>xheditor/upload.html',upMultiple:1,tools:'Bold,Italic,Underline,Link,Img'}">
									${map.answer }
								</textarea>
								<span class="btn btn-small btn-info" onclick="submitAnswer(this,${map.id })">答</span>
						 	</div>
						 	<div class='ft'> 
						 		<p> 
						 			<span class='date'> 
						 				${map.question_at }
						 			</span> 
						 			<span class='action' onclick="ignoreQuestion(${map.id},this)"> 
						 				忽略该问题 
						 			</span>
						 			<span class='action up' onclick="doAction('question','agree',${map.id },this)"> 
						 				顶(<em>${map.agree_num }</em>) 
						 			</span> 
						 			<span class='action down' onclick="doAction('question','disagree',${map.id },this)"> 
						 				踩(<em>${map.disagree_num }</em>) 
						 			</span> 
						 			<span class='action' onclick="doAction('question','collect',${map.id },this)"> 
						 				收藏(<em>${map.collect_num }</em>) 
						 			</span> 
						 			<span class='action' onclick="doAction('question','favor',${map.id },this)"> 
						 				喜欢(<em>${map.favor_num }</em>) 
						 			</span> 
						 			<span class='action comment'> 
						 				<a href="c/q/${map.id }.html">评论(<em>${map.comments_num }</em>)</a> 
						 			</span>
						 			
						 		</p> 
						 	</div> 
						 </div> 
					 	</div> 
               		</c:forEach>
                </div>
                <div class="pagination pagination-centered">
					<ul>
						<c:if test="${answers.hasPreviousPage == true}">
							<li><a href="u/question.html?page=${answers.currentPage-1 }">上一页</a></li>
						</c:if>
						<c:forEach var="x" begin="${answers.startPage }" end="${answers.endPage }" step="1"> 
							<li <c:if test="${x==answers.currentPage }">class="disabled"</c:if>><a href="u/question.html?page=${x }">${x }</a></li>
						</c:forEach>
						<c:if test="${answers.hasNextPage ==true }">
							<li><a href="u/question.html?page=${answers.currentPage+1 }">下一页</a></li>
						</c:if>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" value="${user.id }" id="currentUserId"/>
<input type="hidden" value="<%=basePath%>" id="baseUrl"/>
<script type="text/javascript">
	$(document).ready(function(){
		listen();
		$(".xheditor").each(function(i,e){
			$(e).xheditor().settings.focus=function(){
				$(".xheIframeArea").eq(i).css("height","300px");
			};
			$(e).xheditor().settings.blur=function(){
				$(".xheIframeArea").eq(i).css("height","75px");
			};
			
		});
		
	});
	function ignoreQuestion(qid,element){
		var data = {questionId:qid};
		$.ajax({
			type: "POST",  
	        url:"<%=basePath%>u/ignore-question.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
			success: function(response){ 
	        	if(response){
	        		if(response.ok){
	        			$("#question_"+qid).slideUp();
	        		}else{
	        			$(element).tooltip({'title':'出错','trigger':'manual'});
        				$(element).tooltip("show");
        				setTimeout(function(){$(element).tooltip("hide");$(element).tooltip("destroy");},1000);
	        		}
	        	}
	        },
		 	error: function(e){}
		});
	}
	function submitAnswer(btn,qid){
		var textarea = $(btn).parent().find("textarea").eq(0);
		var answer = textarea.val();
		if($.trim(answer)===""){
			alert("答案呢?");
			return;
		}
		var data = {questionId:qid,answer:answer};
		$.ajax({
			type: "POST",  
	        url:"<%=basePath%>u/submit-answer.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
			success: function(response){ 
	        	if(response){
	        		if(response.ok){
	        			$(btn).parent().html(answer);
	        		}
	        	}
	        },
		 	error: function(e){}
		});
	}
	function listen(){
		$("#addUserTagBtn").click(function(){
			var tagName = $("#tagsinput_tag").val();
			var userId = $("#currentUserId").val();
			if($.trim(tagName)===''){
				return;
			}
			var data = {tagName:tagName,userId:userId};
			$("#addUserTagBtn").find("i").eq(0).html("<img src='img/loading-input.gif' />");
			$.ajax({    
		        type: "POST",  
		        url:"<%=basePath%>user/addtag.json",
		        contentType : 'application/json',
	            data:JSON.stringify(data),
	            dataType:'json',
		        success: function(response){ 
		        	if(response){
		        		if(response.ok){
		        			$("#taglist").append("&nbsp;<span class='badge tag action'>&nbsp;"+tagName+"&nbsp;<i class='icon-minus-sign' onclick='removeUserTag(\""+response.data.id+"\",this)'></i></span>");
			  				$("#tagsinput_tag").val('');
			  				$("#addUserTagBtn").find("i").eq(0).html("");
		        		}
		        	}
		        },
			 	error: function(e){    }
			});
		});
		$("#getmore").click(function(){
			ajaxLoadTimeline();
		});
		$("#profile-input").keyup(function(e){
			if(e.keyCode===13){
				saveProfile($("#profile-input").find("i").eq(0));
			}
		});
	}
	function editorProfile(){
		$("#profile-saved").hide();
		$("#profile-editor").show();	
	}
	function changeToSaved(profile){
		$("#profile-saved").show();
		$("#profile-editor").hide();
		$("#profile-saved font").each(function(i,e){
			$(e).html(profile);
		});
	}
	function saveProfile(obj){
		var profile = $("#profile-input").val();
		var data = {"profile":profile};
		$.ajax({    
	        type: "post",  
	        url:"<%=basePath%>user/profilesave.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
	        success: function(response){
				if(response.ok){
					changeToSaved(profile);
				}
	        },
	        error: function(e){}
		});
	}
	
	function ajaxLoadTimeline(){
		var data = {lasttime:$("#lasttime").val()};
		$.ajax({    
	        type: "get",  
	        url:"<%=basePath%>u/timeline.json",
	        contentType : 'application/json',
            data:data,
            dataType:'json',
	        success: function(response){
				if(response.ok){
					
					for(var i=0; i<response.data.length; i++){
						var event = response.data[i];
						if(event.eventName==="question"){
							var html = buildQuestion(event.map);
							$("#timeline").append(html);
						}
						if(event.eventName==="answer"){
							var html = buildAnswer(event.map);
							$("#timeline").append(html);
						}
						if(event.eventName==="article"){
							var html = buildArticle(event.map);
							$("#timeline").append(html);
						}
						if(i==response.data.length-1){
							$("#lasttime").val(event.eventTime);
						}
					}
				}
	        },
	        error: function(e){}
		});
	}
	
	
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>